//渲染
import tools from '../../../utils/tools';
import cartItem from '../../../templates/cartItem.tpl';
import Event from './Event';



//装饰器
// @tools
export default class Render {
  constructor(oCart, courseData, cartData, observer) {
    this.oCart = oCart;
    this.courseData = courseData;
    this.cartData = cartData;
    this.observer = observer;

    this.init();
  }

  init() {
    this.render();
    new Event(
      this.oCart,
      this.courseData,
      this.cartData,
      this.observer
    );
  }

  /**
   * 渲染方法
   * 需要：模板/渲染方法函数/创建li节点方法函数
   */
  render() {
    //防止页面回流重新渲染利用文档碎片插入页面
    const oFrag = document.createDocumentFragment();

    this.cartData.forEach((item) => {
      //创建li节点
      oFrag.appendChild(tools().createElement(
        //节点
        'li',
        //文本内容
        tools().tplReplace(cartItem, {
          //解析
          id: item.id,
          title: item.title,
          originPrice: item.coupon ? `<del>￥${item.price}.00</del>` : `￥${item.price}.00`,
          currentPrice: item.coupon ? `￥${Number(item.price)-Number(item.coupon)}.00` : '',
          coupon: item.coupon ? `￥${item.coupon}.00` : '暂无优惠券'
        })
      ));
    });

    //将碎片插入页面列表容器里
    this.oCart.appendChild(oFrag);
  }

}